<template>
    <div class="home">
        <component :is="component">
            <template #logo>
               <Logo/>
            </template>
            <template #menu>
                <Menu />
            </template>
            <template #header>
                <Header />
            </template>
            <template #toolbar>
                <Header />
            </template>
            <template #tab>
                <Tab />
            </template>
            <template #content>
                <content />
            </template>
            <template #fotter>
                <Fotter />
            </template>
        </component>
        <Drawer />
    </div>
</template>

<script setup>
import { computed, defineAsyncComponent } from 'vue'
import Menu from "@/views/menu/Menu.vue";
import content from "@/views/layoutLeft/Content.vue";
import Header from "@/views/layoutLeft/Header";
import Fotter from "@/views/layoutLeft/Fotter";
import { pageSet } from "@/store/pinia";
import Drawer from "@/components/header/Drawer.vue";
import Tab from './layoutLeft/Tab.vue';
import Logo from './layoutLeft/Logo.vue';
const components = {
    layout_lengthways: defineAsyncComponent(() => import('@/components/home/Layout.vue')),
    layout_classical: defineAsyncComponent(() => import('@/components/home/LayoutClassical.vue')),
    layout_crosswise: defineAsyncComponent(() => import('@/components/home/layoutCrosswise.vue'))
}
const component = computed(()=>{
    return components[pageSet().layoutComponent.component]
})
</script>
<style scoped>
.home {
    height: 100%;
}
</style>
